// component/WxCoolFloatMenu/WxCoolFloatMenu.js
var systemInfo = wx.getSystemInfoSync();
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        modelEnable: {
            type: Boolean,
            value: false
        },
        mainItem: {
            type: Object,
            value: {}
        },
        subItems: {
            type: Object,
            value: []
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        isShow: false,      // 蒙板显示控制
        animMain: {},       // 主按钮旋转动画控制
        animiTranslate: []  // 子菜单按钮平移旋转动态控制
    },
    ready: function () {
        // 清除子按钮图标与主按钮图标叠加效果
        this.fold();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 点击弹出或者收起
        showOrHide: function() {
            if (this.data.isShow) {
                // 缩回动画
                this.fold();
                this.setData({
                    isShow: false
                })
            } else {
                // 弹出动画
                this.unfold();
                this.setData({
                    isShow: true
                })
            }
        },
        bindMethod: function(e) {
            console.log(e)
            let that = this;
            that.triggerEvent(e.currentTarget.dataset.method);
            that.showOrHide();
        },
        unfold: function(e) {
            let that = this;
            let animi_translate_array = []
            let animation_main = wx.createAnimation({
                duration: 400,
                timingFunction: 'ease-out'
            })
            animation_main.rotateZ(180).step();

            for (let i = 0; i < that.data.subItems.length; i++) {
                let animi_trans_item = wx.createAnimation({
                    duration: 400,
                    timingFunction: 'ease-out'
                })
                // .rotateZ(180) 旋转180°
                animi_trans_item.translate(0, -(130 + 110 * i) / 750 * systemInfo.windowWidth).opacity(1).step();
                animi_translate_array.push(animi_trans_item)
            }

            that.setData({
                animMain: animation_main.export(),
            })

            for (let i = 0; i < animi_translate_array.length; i++) {
                let animi_item = 'animiTranslate[' + i + ']';               
                that.setData({
                    [animi_item]: animi_translate_array[i].export()
                })
            }
        },
        fold: function() {
            // main按钮逆时针旋转
            let that = this;
            var animation_main = wx.createAnimation({
                duration: 400,
                timingFunction: 'ease-out'
            })
            animation_main.rotateZ(0).step();


            let animi_translate_array = [];
            for (let i = 0; i < that.data.subItems.length; i++) {
                let animi_trans_item = wx.createAnimation({
                    duration: 400,
                    timingFunction: 'ease-out'
                })
                animi_trans_item.translate(0, 0).rotateZ(0).opacity(0).step();
                animi_translate_array.push(animi_trans_item)
            }

            that.setData({
                animMain: animation_main.export()        
            })

            for (let i = 0; i < animi_translate_array.length; i++) {
                let animi_item = 'animiTranslate[' + i + ']';
                that.setData({
                    [animi_item]: animi_translate_array[i].export()
                })
            }
        }
    },
    // 解决滚动穿透问题
    myCatchTouch: function() {
        return
    }
})